<template>
  <!--  商品评论页面-->
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__good">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="orderId">
          <el-input v-model="dataForm.orderId" clearable  placeholder="请输入订单ID"></el-input>
        </el-form-item>
        <el-form-item prop="productId">
          <ComSelectPage ref="newPageSelect" @selectPageChange="e=>dataForm.productId=e"
                         :getUrl="{
        url:'/api/product/page',
        method:'get',
        params:{page: 1,limit: 10,total: 0},
      }" clearable placeholder="请选择商品" :defaultValue="dataForm.productId" selectLabel="productName" selectValue="id"></ComSelectPage>
        </el-form-item>
        <el-form-item prop="isHide">
          <ren-select v-model="dataForm.isHide" dict-type="is_hide" placeholder="请选择是否显示评论"></ren-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="createDateList"
              type="daterange"
              placeholder="请选择创建日期"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="开始创建日期"
              end-placeholder="结束创建日期"
              value-format="yyyy-MM-dd"
              class=""
              @change="createCK"
          />
        </el-form-item>
        <el-form-item>
          <el-button  v-if="$hasPermission('api:productComment:page')" @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('api:productComment:delete')" type="danger" @click="deleteHandle()">
            删除
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
          v-loading="dataListLoading"
          :data="dataList"
          stripe highlight-current-row
          @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle"
          ref="multipleTable" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="productId" label="商品ID" header-align="center" align="center" width="200">
          <template slot-scope="{}" slot="header">
            <!-- 表头名称 -->
            <span>商品信息</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size:16px;"></i>
              <!-- 悬停提示内容 -->
              <div slot="content">
                <div>点击下方名称查看详细信息</div>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <div class="flex_columns" @click="showProductList(row['productDTO'])" v-if="row['productDTO']">
              <div class="flex_rows flex_center">
                <el-avatar size="large" :src="row['productDTO']['imgUrl']" v-if="row['productDTO']['imgUrl']"></el-avatar>
                <div class="flex_columns" style="margin-left: 10px;">
                  <div class="flex_rows" style="text-decoration: underline;cursor: pointer;">ID:{{row['productDTO']['id']}}</div>
                  <div class="flex_rows flex_center" style="text-decoration: underline;cursor: pointer;">
                    <div class="ellipsis1" style="max-width: 140px;">
                      {{row['productDTO']['productName']}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!row.productDTO">{{row.productId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="specsId" label="规格ID" header-align="center" align="center" width="200">
          <template slot-scope="{}" slot="header">
            <!-- 表头名称 -->
            <span>规格信息</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size:16px;"></i>
              <!-- 悬停提示内容 -->
              <div slot="content">
                <div>点击下方名称查看详细信息</div>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <div class="flex_columns" @click="showProductSpecsList(row['productSpecsDTO'])" v-if="row['productSpecsDTO']">
              <div class="flex_rows flex_center">
                <el-avatar size="large" :src="row['productSpecsDTO']['imgUrl']" v-if="row['productSpecsDTO']['imgUrl']"></el-avatar>
                <div class="flex_columns" style="margin-left: 10px;">
                  <div class="flex_rows" style="text-decoration: underline;cursor: pointer;">商品ID:{{row['productSpecsDTO']['productId']}}</div>
                  <div class="flex_rows flex_center" style="text-decoration: underline;cursor: pointer;">
                    <div class="ellipsis1" style="max-width: 150px;">
                      {{row['productSpecsDTO']['specsOption']}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!row['productSpecsDTO']">{{row.specsId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID" header-align="center" align="center" width="180" >
          <template slot-scope="{}" slot="header">
            <!-- 表头名称 -->
            <span>用户信息</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size:16px;"></i>
              <!-- 悬停提示内容 -->
              <div slot="content">
                <div>点击下方名称查看用户详细信息</div>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="{row}">
            <div class="flex_rows flex_center" @click="showUserList(row['userDTO'])" v-if="row['userDTO']">
              <el-avatar size="large" :src="row['userDTO']['avatar']"></el-avatar>
              <div class="flex_columns" style="margin-left: 10px;">
                <div class="flex_rows" style="text-decoration: underline;cursor: pointer;">ID:{{row['userDTO']['id']}}</div>
                <div class="flex_rows flex_center" style="text-decoration: underline;cursor: pointer;">
                  <div class="ellipsis1" style="max-width: 4em;">
                    {{row['userDTO']['nickname']}}
                  </div>
                  ({{row['userDTO']['identity']}})
                </div>
              </div>
            </div>
            <div v-if="!row['userDTO']">{{row.userId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="isHide" label="是否显示" header-align="center" align="center" sortable="showState" width="120">
          <template slot-scope="{row}">
            <el-dropdown trigger="click" @command="dropdownCk">
              <div class="el-dropdown-link demonstration" >
                <el-tag v-if="row.isHide === 0" size="small" type="success">
                  {{ $getDictLabel("is_hide", row.isHide) }}
                </el-tag>
                <el-tag  v-else size="small" type="info">{{
                    $getDictLabel("is_hide", row.isHide)
                  }}
                </el-tag>
              </div>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item  v-for="(item,index) in getDictDataList('is_hide')" :key="index" :command="row.id+'?'+ item.dictValue">{{ $getDictLabel("is_hide", item.dictValue) }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单ID" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column prop="productScore" label="商品评价" header-align="center" align="center" width="150">
          <template slot-scope="{row}">
            <el-rate v-model="row.productScore" :colors="colors" disabled></el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="serviceScore" label="服务评价" header-align="center" align="center" width="150">
          <template slot-scope="{row}">
            <el-rate v-model="row.serviceScore" :colors="colors" disabled></el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="reply" label="回复内容" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="240">
          <template slot-scope="scope">
            <div class="flex_wrap flex_row_reverse">
              <el-link v-if="$hasPermission('api:productSpecs:update')" type="primary"
                         @click="addOrUpdateHandle(scope.row.id)">回复
              </el-link>
              <el-link v-if="$hasPermission('api:productSpecs:delete')" type="primary"
                         @click="deleteHandle(scope.row.id)">删除
              </el-link>
              <el-link  v-if="$hasPermission('api:getOrder:query')" type="primary"
                          @click="getUserOrderList(scope.row.userOrderDTO)">关联订单</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <user-order-product-list v-if="isUserOrderProductList" ref="UserOrderProductList" @cancellation="$refs.multipleTable.clearSelection()"></user-order-product-list>
      <!--查看用户信息组件-->
      <com-user-list :visible.sync="showUser" :content="content"></com-user-list>
      <!--查看商品信息组件-->
      <com-product-list :visible.sync="showProduct" :content="contentProduct"></com-product-list>
      <com-product-specs-list :visible.sync="showProductSpecs" :content="contentProductSpecs"></com-product-specs-list>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './productCommentAddOrUpdate.vue'
import { getDictDataList } from '@/utils'
import UserOrderProductList from "@/views/modules/service/userOrderProductList.vue";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/productComment/page',
        getDataListIsPage: true,
        deleteURL: '/api/productComment',
        deleteIsBatch: true
      },
      showUser:false,                   //是否显示用户信息
      isUserOrderProductList:false,                   //是否显示用户信息
      content:{},
      showProduct:false,                   //是否显示信息
      contentProduct:{},                   //信息内容
      showProductSpecs:false,                   //是否显示信息
      contentProductSpecs:{},                   //信息内容
      showViewer: false,
      productList:[],                   //商品数据
      createDateList: [],               //创建时间数组
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      dataForm: {
        id: '',
        content: '',                    //用户对商品的评价和留言
        productScore: '',               //用户对商品的评分，通常使用数值表示，如1-5
        serviceScore: '',               //服务评分1-5分
        reply: '',                      //商家回复
        isHide: '',	                    //用于标识是否隐藏评论1隐藏0不隐藏
        productId: '',                  //关联到所属商品的ID
        specsId: '',	                  //关联到所评论的规格ID
        userId: '',                     //关联到发表评论的用户的ID
        orderId:'',                     //订单id
        createDateStart: '',            //开始创建时间
        createDateEnd: '',              //结束创建时间
      },
      timeList:[]                          //时间戳数组
    }
  },
  components: {
    UserOrderProductList,
    AddOrUpdate
  },
  watch: {
    '$route':'getPath'
  },
  created() {
    this.getGroup()
  },
  mounted() {
    if (this.$route.query.productId){
      this.mixinViewModuleOptions.createdIsNeed = false
      this.dataForm.productId = this.$route.query.productId
      this.dataForm.productId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.productId
      this.getDataList()//查询数据
      this.timeList.push(this.$route.query.time)
      return
    }
    if (this.$route.query.orderId){
      this.mixinViewModuleOptions.createdIsNeed = false
      this.dataForm.orderId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.orderId
      this.getDataList()//查询数据
      this.timeList.push(this.$route.query.time)
      return
    }
    this.dataForm.productId = ''
    this.dataForm.orderId = ''
    this.mixinViewModuleOptions.createdIsNeed = true
    this.getDataList()//查询数据
  },
  methods:{
    getDictDataList,
    //监听路由变化
    getPath(){
      if (this.$route.query.productId){
        this.mixinViewModuleOptions.createdIsNeed = false
        this.dataForm.productId = this.$route.query.productId
        this.dataForm.productId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.productId
        this.getDataList()//查询数据
        this.timeList.push(this.$route.query.time)
        return
      }
      if (this.$route.query.orderId){
        this.mixinViewModuleOptions.createdIsNeed = false
        this.dataForm.orderId = this.timeList.includes(this.$route.query.time)?'': this.$route.query.orderId
        this.getDataList()//查询数据
        this.timeList.push(this.$route.query.time)
        return
      }
      this.mixinViewModuleOptions.createdIsNeed = true
      this.dataForm.productId = ''
      this.dataForm.orderId = ''
      this.getDataList()//查询数据
    },
    /*创建时间选择*/
    createCK() {
      if (!this.createDateList){
        this.dataForm.createDateStart = ''
        this.dataForm.createDateEnd = ''
        return
      }
      this.dataForm.createDateStart = this.createDateList[0]
      this.dataForm.createDateEnd = this.createDateList[1]
    },
    //显示用户信息
    showUserList(content){
      this.showUser=true;
      this.content= content;
    },
    //显示商品信息
    showProductList(content){
      this.showProduct=true;
      this.contentProduct= content;
    },
    //显示商品规格信息
    showProductSpecsList(content){
      this.showProductSpecs=true;
      this.contentProductSpecs= content;
    },
    //查看订单信息
    getUserOrderList(item){
      this.$refs.multipleTable.toggleRowSelection(item);
      this.isUserOrderProductList = true
      this.$nextTick(() => {
        this.$refs.UserOrderProductList.dataForm.id = item.id
        this.$refs.UserOrderProductList.init()
      })
    },
    // 获取所有商品信息
    getGroup() {
      this.$http.get(`/api/product/page`).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.productList = res.data.list
      }).catch(() => {
      })
    },
    //快速修改是否隐藏评论状态
    dropdownCk(e){
      const value = e.split('?')
      const item = {id:  value[0], isHide: value[1]}
      this.$http.put('/api/productComment', item).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getDataList()
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
img {
  height: 400px;
}
.el-dropdown-link {
  cursor: pointer;
}
.demonstration {
  display: block;
}
.el-button{
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
